<template>
  <el-dialog width="550px" title="上传海报" v-model="dialogFormVisible" :draggable="true" @close="dialogClose">
    <div>
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogFormRules">
        <el-form-item prop="title" label="标题名称">
          <el-input v-model="dialogForm.title" placeholder="请输入标题名称" />
        </el-form-item>
        <el-form-item prop="sortPower" label="排序">
          <el-input-number style="width: 100%;" v-model="dialogForm.sortPower" :min="1" :max="100000" placeholder="请输入排序" />
        </el-form-item>
        <el-form-item prop="bannerUrl" label="选择图片">
          <el-upload class="f-img-uploader" :action="uploadForm.action" :headers="uploadForm.headers" :data="uploadForm.data"
            :show-file-list="false" :on-success="uploadSuccess">
            <img v-if="dialogForm.bannerUrl" :src="dialogForm.bannerUrl" class="f-img" />
            <el-icon v-else class="f-img-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submitHandle">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import api from '../api'
import { getStore, successDeal, warningDeal } from '@/utils/utils'
import axios from "axios"
export default {
  setup(props, context) {
    const dialogFormRef = ref(null)

    const state = reactive({
      loading: false,
      dialogFormVisible: false,
      dialogForm: {},
      parentTypeOptions: [],

      parentProps: {
        value: 'typeId',
        label: 'typeName',
        checkStrictly: true,
      },
      dialogFormRules: {
        parentType: [
          { required: true, message: '请选择分组', trigger: 'blur' },
        ],
        title: [
          { required: true, message: '请输入标题名称', trigger: 'blur' },
        ],
        sortPower: [
          { required: true, message: '请输入排序', trigger: 'blur' },
        ],
        bannerUrl: [
          { required: true, message: '请上传图片', trigger: 'blur' },
        ],
      },

      uploadForm: {
        action: '/ums/file/upload/user/pub',
        headers: {
          Authorization: getStore('USER_AUTHOR_INRE').Authorization || `'','','',3,20,''`,
          Token: `Bearer ${window.localStorage.getItem("USER_TOKEN_INRE")}`,
          platformHeadType: 'rcmsPlatform'
        },
        data: {}
      },
    })

    function dialogShow(data = {}) {
      state.dialogForm = data
      getSucaiTree()
      state.dialogFormVisible = true
    }

    function getSucaiTree() {
      const obj = {

      }
      api.haibaoTypeList(obj).then(res => {
        if (res.code == '200') {
          state.parentTypeOptions = res.data.list
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function dialogClose() {
      dialogFormRef.value && dialogFormRef.value.resetFields()
    }



    function submitHandle() {
      if (state.loading) return
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          let json = {
            "bannerUrl": state.dialogForm.bannerUrl,
            "sortPower": state.dialogForm.sortPower,
            "title": state.dialogForm.title,
            "typeId": state.dialogForm.parentType
          }
          api.haibaoAdd(json).then(res => {
            successDeal('新增成功')
            context.emit('dialogClose')
            state.dialogFormVisible = false
            state.loading = false
          })
        }
      })
    }

    const uploadSuccess = (res) => {
      if (res.code == '200') {
        state.dialogForm.bannerUrl = res.data.ossUrl
        dialogFormRef.value.validate()
      } else {
        errorDeal(res.msg)
      }
    }

    const selectType = (e) => {
      console.log(e)
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      dialogShow,
      dialogClose,
      submitHandle,
      uploadSuccess,
      selectType,
    }
  }
}
</script>

<style>
.f-img-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.f-img-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.f-img-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 125px;
  height: 125px;
  text-align: center;
}
.f-img {
  width: 125px;
  height: 125px;
}
</style>